import React, { Component } from 'react';
import {
    StyleSheet,
    Dimensions,
    Image,
    Platform
} from 'react-native';
import {
    createBottomTabNavigator
} from 'react-navigation';
import color from '../../macro/color';
import Main from '../main/main';
import Discovery from '../discovery/discovery';
import Mine from '../mine/mine';

export default Tab = createBottomTabNavigator(
    {
        Main: {
            screen: Main,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '首页',
                showLabel: true,
                tabBarIcon:({tintColor, focused}) => (
                    <Image style={styles.tabBarIconMain} source={focused ? require('../../image/tabbar/main-select.png') : require('../../image/tabbar/main.png')} />
                ),
            }
        },

        Discovery: {
            screen: Discovery,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '发现',
                showLabel: true,
                tabBarIcon:({tintColor, focused}) => (
                    <Image style={styles.tabBarIconDiscovery} source={focused ? require('../../image/tabbar/discivery-select.png') : require('../../image/tabbar/discovery.png')} />
                ),
            }
        },

        Mine: {
            screen: Mine,
            navigationOptions: {
                tabBarPosition: 'bottom',
                tabBarLabel: '我的',
                showLabel: true,
                tabBarIcon:({tintColor, focused}) => (
                    <Image style={styles.tabBarIconMine} source={focused ? require('../../image/tabbar/mine-select.png') : require('../../image/tabbar/mine.png')} />
                ),
            }
        },
    }, {
        tabBarOptions: {
            activeTintColor: color.tabbar_active,
            inactiveTintColor: color.tabbar_inactive,
        },
        animationEnabled: true,
        swipeEnabled: false,
        initialRouteName: 'Main',
        tabBarOptions: {
            indicatorStyle: {
                height: 0,
            },
            labelStyle: {
                fontSize: 11,
            },
            style: {
                borderTopColor: '#ebebeb',
                borderWidth: 0,
                backgroundColor: 'white',
                height: Dimensions.get('window').height*0.08,
            }
        }
    }
)

const styles = StyleSheet.create({

    tabBarIconMain: {
        width: 19,
        height: 18,
    },
    tabBarIconDiscovery: {
        width: 25,
        height: 18.5,
    },
    tabBarIconMine: {
        width: 17,
        height: 18.5,
    }
});